<script lang="ts" setup>
import createUpload from "@util/createUpload"
</script>

<template>
  <div class="upload-box" ref="box">
    <div class="upload">
      <img src="/upload.svg" alt="icon load error" draggable="false">
      <p class="introduction">{{$t("upload.introduction")}}</p>
      <div class="tip">
        <p>{{$t("upload.tip1")}}</p>
        <div class="check-computer">
          <img src="/folder.svg" alt="icon load error" draggable="false">
          <span @click="createUpload">{{$t("upload.tip2")}}</span>
        </div>
      </div>
      <div class="allow">
        <p>{{$t("upload.allow1")}}</p>
        <div class="allow-size">
          <p>{{$t("upload.allow2")}}</p>
          <img src="/warn.svg" alt="icon load error" draggable="false">
        </div>
      </div>
      <div class="warn">{{$t("upload.warn1")}} <span>{{$t("upload.warn2")}}</span> {{$t("upload.warn3")}} <a
          target="_blank" href="https://12377.cn/">{{$t("upload.warn4")}}</a> {{$t("upload.warn5")}}</div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@media screen and (max-width: 450px) {
  .allow {
    display: block !important;

    .allow-size {
      margin-top: 8px;
      justify-content: center;
    }
  }

  .upload {
    font-size: 14px;

    &>img {
      width: 150px;
      height: 150px;
    }
  }

  .introduction {
    font-size: 24px;
  }
}

@media screen and (min-width: 451px) {
  .introduction {
    font-size: 26px;
  }
}

.upload-box {
  @include center;

  p {
    text-align: center;
  }

  .upload {
    @include vC;
    flex-direction: column;

    &>img {
      cursor: pointer;
    }

    .introduction {
      text-align: center;
      color: $uploadFontColor;
    }

    .tip {
      color: $uploadFontColor;
      margin-top: 8px;
      @include vC;

      .check-computer {
        @include vC;
        cursor: pointer;

        img {
          width: 18px;
          height: 18px;
          margin: 0 4px;
          margin-top: 1px;
        }

        span {
          color: $uploadColor;
        }
      }
    }

    .allow {
      margin-top: 8px;
      color: $uploadTipColor;
      display: flex;
      text-align: center;
      flex-wrap: wrap;
      @include center;

      .allow-size {
        text-align: center;
        @include vC;

        p {
          margin-left: 8px;
        }

        img {
          width: 14px;
          height: 14px;
          margin-left: 8px;
        }
      }
    }

    .warn {
      margin-top: 8px;
      color: $uploadTipColor;
      text-align: center;

      span {
        color: $dangerColor;
      }

      a {
        color: $urlColor;
      }
    }
  }
}
</style>
